<template>
  <div class="channel-jurisdictions">
    <div class="company-title">公司信息</div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div>
          <span class="leftspan">公司名称</span>
          <span class="rightspan">{{ companyInfo.companyName }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <span class="leftspan">公司编码</span>
          <span class="rightspan">{{ companyInfo.companyCode }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <span class="leftspan">公司类型</span>
          <span class="rightspan">{{ companyInfo.companyType }}</span>
        </div>
      </el-col>
    </el-row>
    <div class="company-title">系统信息</div>
    <el-editable
      :data="tableData"
      :columns="menuListColumns"
      v-loading="getListLoading"
      height="1600"
    >
      <template slot="default-appGroupName" slot-scope="scope">
        <el-checkbox
          v-model="scope.row.isCheckAppGroup"
          @change="
            changeSelect(
              tableData,
              scope.row.appGroupId,
              1,
              scope.row.isCheckAppGroup
            )
            returnDeepArr(tableData, scope.row, 1, scope.row.isCheckAppGroup)
          "
        >
        </el-checkbox>
        {{ scope.row.appGroupName }}
      </template>
      <template slot="default-appName" slot-scope="scope">
        <el-checkbox
          v-model="scope.row.isCheckApp"
          @change="
            changeSelect(tableData, scope.row.appId, 2, scope.row.isCheckApp)
            returnDeepArr(tableData, scope.row, 2, scope.row.isCheckApp)
          "
        >
        </el-checkbox>
        {{ scope.row.appName }}
      </template>
      <template slot="default-appResourceName" slot-scope="scope">
        <el-checkbox
          v-model="scope.row.isCheckAppResource"
          @change="
            changeSelect(
              tableData,
              scope.row.appResourceId,
              3,
              scope.row.isCheckAppResource
            )
            returnDeepArr(tableData, scope.row, 3, scope.row.isCheckAppResource)
          "
        >
        </el-checkbox>
        {{ scope.row.appResourceName }}
      </template>
      <template slot="default-appResourceNametwo" slot-scope="scope">
        <el-checkbox
          v-model="scope.row.isCheckAppResourcetwo"
          @change="
            changeSelect(
              tableData,
              scope.row.appResourceIdtwo,
              4,
              scope.row.isCheckAppResourcetwo
            )
            returnDeepArr(
              tableData,
              scope.row,
              4,
              scope.row.isCheckAppResourcetwo
            )
          "
        >
        </el-checkbox>
        {{ scope.row.appResourceNametwo }}
      </template>
      <template slot="default-appResourceNamethree" slot-scope="scope">
        <el-checkbox
          v-if="scope.row.appResourceNamethree"
          v-model="scope.row.isCheckAppResourcethree"
          @change="
            changeSelect(
              tableData,
              scope.row.appResourceIdthree,
              5,
              scope.row.isCheckAppResourcethree
            )
            returnDeepArr(
              tableData,
              scope.row,
              5,
              scope.row.isCheckAppResourcethree
            )
          "
        >
        </el-checkbox>
        {{ scope.row.appResourceNamethree }}
      </template>
    </el-editable>
    <el-dialog
      title="当前选项已被使用,是否继续"
      width="300px"
      :visible.sync="detailVisible"
    >
      <el-form :inline="true">
        <el-form-item>
          <el-button type="button" @click="closeDialog">
            取消
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="comfirmDelete">
            确认
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable'
import {menuListColumns, companyTypeMap} from './const'
import {PAGE_NUMBER, PAGINATION_LAYOUT} from '@const/common'
import {
  staffUcgetAppAndByCompanyId,
  staffUcMerchantAppaddOrEditApp
} from '@const/api_staffCenter'
import {hasIn, cloneDeep} from 'lodash'
import {isArray} from 'util'
import {darkblue} from 'color-name'
export default {
  data() {
    return {
      getListLoading: false,
      tableData: [],
      menuListColumns,
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0,
      companyInfo: {}, // 公司信息
      companyTypeMap,
      submitList: [],
      index: 0,
      detailVisible: false,
      appList: []
    }
  },
  components: {
    ElEditable
  },
  mounted() {
    const btn = {
      type: 'btn',
      arr: [
        {type: 'button', val: '返回', handle: this.back},
        {type: 'primary', val: '提交', handle: this.submit}
      ]
    }
    this.$store.commit('changeLayoutHandle', btn)
    this.searchForm()
  },
  methods: {
    formeaterTableData(data) {
      let arr = []
      data.forEach(item => {
        item.appAndAppResourceVOList.forEach(ite => {
          ite.appResourceTreeVOList.forEach(it => {
            if (isArray(it.children) && it.children.length) {
              it.children.forEach(i => {
                if (isArray(i.children) && i.children.length) {
                  i.children.forEach(t => {
                    arr.push({
                      appGroupName: item.appGroupName,
                      appGroupId: item.appGroupId,
                      isCheckAppGroup: false,
                      appId: ite.appId,
                      appName: ite.appName,
                      isCheckApp: false,
                      appResourceName: it.appResourceName,
                      appResourceId: it.appResourceId,
                      isCheckAppResource: false,
                      appResourceNametwo: i.appResourceName,
                      appResourceIdtwo: i.appResourceId,
                      isCheckAppResourcetwo: false,
                      appResourceIdthree: t.appResourceId,
                      appResourceNamethree: t.appResourceName,
                      isCheckAppResourcethree: false
                    })
                  })
                } else {
                  arr.push({
                    appGroupName: item.appGroupName,
                    appGroupId: item.appGroupId,
                    isCheckAppGroup: false,
                    appId: ite.appId,
                    appName: ite.appName,
                    isCheckApp: false,
                    appResourceName: it.appResourceName,
                    appResourceId: it.appResourceId,
                    isCheckAppResource: false,
                    appResourceNametwo: i.appResourceName,
                    appResourceIdtwo: i.appResourceId,
                    isCheckAppResourcetwo: false,
                    appResourceIdthree: '',
                    appResourceNamethree: '',
                    isCheckAppResourcethree: false
                  })
                }
              })
            } else {
              arr.push({
                appGroupName: item.appGroupName,
                appGroupId: item.appGroupId,
                appId: ite.appId,
                appName: ite.appName,
                appResourceName: it.appResourceName,
                appResourceId: it.appResourceId
              })
            }
          })
        })
      })
      return arr
    },
    searchForm() {
      this.$axios({
        method: 'get',
        url: staffUcgetAppAndByCompanyId,
        params: {
          companyId: this.$route.query.id
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        this.companyInfo = {
          companyName: obj.companyName,
          companyCode: obj.companyCode,
          companyType: this.companyTypeMap[obj.companyType]
        }
        this.tableData = this.formeaterTableData(obj.appGroupVOList)
      })
    },
    changeSelect(data, id, index, isCheck) {
      if (index === 1) {
        data.forEach(item => {
          if (item.appGroupId === id) {
            item.isCheckApp = isCheck
            item.isCheckAppResource = isCheck
            item.isCheckAppResourcetwo = isCheck
            item.isCheckAppResourcethree = isCheck
          }
        })
      } else if (index === 2) {
        data.forEach(item => {
          if (item.appId === id) {
            item.isCheckAppResource = isCheck
            item.isCheckAppResourcetwo = isCheck
            item.isCheckAppResourcethree = isCheck
          }
        })
      } else if (index === 3) {
        data.forEach(item => {
          if (item.appResourceId === id) {
            item.isCheckAppResourcetwo = isCheck
            item.isCheckAppResourcethree = isCheck
          }
        })
      } else if (index === 4) {
        data.forEach(item => {
          if (item.appResourceIdtwo === id) {
            item.isCheckAppResourcethree = isCheck
          }
        })
      }
    },
    returnDeepArr(data, row, index, isCheck) {
      let arr = []
      data.forEach(item => {
        if (item.appResourceIdtwo === row.appResourceIdtwo) {
          arr.push(item)
        }
      })
      let bool = arr.every(ite => {
        return ite.isCheckAppResourcethree === true
      })
      arr.forEach(item => {
        item.isCheckAppResourcetwo = bool
      })
      let arr1 = []
      data.forEach(item => {
        if (item.appResourceId === row.appResourceId) {
          arr1.push(item)
        }
      })
      let bool1 = arr1.every(ite => {
        return ite.isCheckAppResourcetwo === true
      })
      arr1.forEach(item => {
        item.isCheckAppResource = bool1
      })
      let arr2 = []
      data.forEach(item => {
        if (item.appId === row.appId) {
          arr2.push(item)
        }
      })
      let bool2 = arr2.every(ite => {
        return ite.isCheckAppResource === true
      })
      arr2.forEach(item => {
        item.isCheckApp = bool2
      })
      let arr3 = []
      data.forEach(item => {
        if (item.appGroupId === row.appGroupId) {
          arr3.push(item)
        }
      })
      let bool3 = arr3.every(ite => {
        return ite.isCheckApp === true
      })
      arr3.forEach(item => {
        item.isCheckAppGroup = bool3
      })
    },
    back() {
      this.$router.go(-1)
    },
    submit() {
      this.appList = []
      this.tableData.forEach(item => {
        let bool = this.appList.some(ite => {
          return ite.appId === item.appId
        })
        if (!bool) {
          this.appList.push({
            appId: item.appId,
            appResourceIdList: []
          })
        }
      })
      this.tableData.forEach(item => {
        this.appList.forEach((ite, index) => {
          if (item.appId === ite.appId) {
            if (item.isCheckAppResource) {
              ite.appResourceIdList.push(item.appResourceId)
            }
            if (item.isCheckAppResourcetwo) {
              if (item.appResourceIdtwo)
                ite.appResourceIdList.push(item.appResourceIdtwo)
            }
            if (item.isCheckAppResourcethree) {
              if (item.appResourceIdthree)
                ite.appResourceIdList.push(item.appResourceIdthree)
            }
          }
        })
      })
      this.appList.forEach(item => {
        item.appResourceIdList = [...new Set(item.appResourceIdList)]
      })
      this.$axios({
        method: 'post',
        url: staffUcMerchantAppaddOrEditApp,
        data: {
          companyId: this.$route.query.id,
          deleteFlag: 1,
          appAndAppResourceFormList: this.appList
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.$router.go(-1)
          } else {
          }
        })
        .catch(res => {
          console.log('ss')
          this.detailVisible = true
        })
    },
    closeDialog() {
      this.detailVisible = false
      this.appList = []
    },
    comfirmDelete() {
      this.$axios({
        method: 'post',
        url: staffUcMerchantAppaddOrEditApp,
        data: {
          companyId: this.$route.query.id,
          deleteFlag: 2,
          appAndAppResourceFormList: this.appList
        }
      }).then(res => {
        if (res.data.code === '0') {
          this.$message({
            type: 'success',
            message: '提交成功'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            type: 'success',
            message: '提交失败'
          })
          this.appList = []
          this.detailVisible = false
        }
      })
    }
  }
}
</script>
<style lang="less">
.channel-jurisdictions {
  .company-title {
    font-size: 24px;
    height: 47px;
    line-height: 47px;
  }
  .container-box {
    height: 100%;
    overflow: auto;
    display: flex;
  }
  .el-form {
    text-align: center !important;
  }
  .rightspan {
    color: #a7b1c7;
    margin-left: 16px;
  }
  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }
}
</style>
